<template>
  <div class="afterInvestDel-page details-page app-container1">
    <pubChunk>
      <div slot="title">
        <span class="title">{{info.compositionName}}</span>
        <el-tooltip v-if="info.mark" popper-class="tit-tip" :open-delay="500" :content="info.mark" placement="right">
          <i class="el-icon-document fontdoc"></i>
        </el-tooltip>
      </div>
      <div slot="headLeft">
        <el-button size="small" type="primary" @click="goContrast"><i class="iconfont icon-jia"></i>去对比</el-button>
        <el-button size="small" type="primary" @click="goConfigPage"><svg-icon icon-class="caidan" style="margin-right: 6px;" />配置组合</el-button>
      </div>
      <!-- <div slot="subtitle" style="margin-top: 8px;">
        <span>所属投顾：xxxxxxx</span>
        <span style="padding-left: 40px;">成立时间：xxxxxxx</span>
      </div> -->
      <div class="head3">
        <div class="head-content flex">
          <div class="left">
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>单位净值：</p>
                    <p class="fs12 tip">{{info.netWorthEndTime | parseTime}}</p>
                  </div>
                  <div class="fromLine-content fzBig">{{info.compositionNetWorth}}</div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>今年以来收益率：</p>
                    <p class="fs12 tip">截止至{{info.netWorthEndTime | parseTime}}</p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span v-if="info.compositionNetWorthExtendBeans&&info.compositionNetWorthExtendBeans[0].incomeRate" 
                    :class="info.compositionNetWorthExtendBeans[0].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{info.compositionNetWorthExtendBeans[0].incomeRate | toFixed2}}%
                    </span>
                    <span v-else class="fzBig">/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label label-line2" style="width: 138.69px;text-align: right;">
                    <p>成立以来收益率：</p>
                    <p class="fs12 tip tof">成立日期：{{info.netWorthTime | parseTime}}</p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span v-if="info.compositionNetWorthExtendBeans&&info.compositionNetWorthExtendBeans[7].incomeRate" 
                    :class="info.compositionNetWorthExtendBeans[7].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{info.compositionNetWorthExtendBeans[7].incomeRate | toFixed2}}%
                    </span>
                    <span v-else class="fzBig">/</span> 
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 16px;">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px;text-align: right;">累计净值：</div>
                  <div class="fromLine-content fw">{{info.compositionNetWorth}}</div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px;text-align: right;">近3月收益率：</div>
                  <div class="fromLine-content fw">
                    <span v-if="info.compositionNetWorthExtendBeans&&info.compositionNetWorthExtendBeans[2].incomeRate" 
                    :class="info.compositionNetWorthExtendBeans[2].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{info.compositionNetWorthExtendBeans[2].incomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px;text-align: right;">年化收益率：</div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean"
                    :class="info.riskIndicatorsBean.annualizedIncomeRate>0?'positiveFc1':'negativeFc1'">
                      {{info.riskIndicatorsBean.annualizedIncomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
          <el-col :span="8">
            <div class="fromLine">
              <div class="label" style="width: 78.69px;text-align: right;">复权净值：</div>
              <div class="fromLine-content fw">{{info.compositionNetWorth}}</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="fromLine">
              <div class="label" style="width: 112px;text-align: right;">近6月收益率：</div>
              <div class="fromLine-content fw">
                <span v-if="info.compositionNetWorthExtendBeans&&info.compositionNetWorthExtendBeans[3].incomeRate" 
                :class="info.compositionNetWorthExtendBeans[3].incomeRate>0?'positiveFc1':'negativeFc1'">
                  {{info.compositionNetWorthExtendBeans[3].incomeRate | toFixed2}}%
                </span>
                <span v-else>/</span> 
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="fromLine">
              <div class="label" style="width: 138.69px;text-align: right;">夏普比率：</div>
              <div class="fromLine-content fw">
                <span v-if="info.riskIndicatorsBean">{{info.riskIndicatorsBean.sharpeRate | toFixed2}}</span>
                <span v-else>/</span> 
              </div>
            </div>
          </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8"><div style="height: 22px;"></div></el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px;text-align: right;">近1年收益率：</div>
                  <div class="fromLine-content fw">
                    <span v-if="info.compositionNetWorthExtendBeans&&info.compositionNetWorthExtendBeans[4].incomeRate" 
                    :class="info.compositionNetWorthExtendBeans[4].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{info.compositionNetWorthExtendBeans[4].incomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px;text-align: right;">最大回撤：</div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">{{info.riskIndicatorsBean.maximumDrawdownRate}}</span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="fromLine">
              <div class="label label-line2">
                <p>投资金额：</p>
                <p class="fs12 tip tof">单位：万元</p>
              </div>
              <div class="fromLine-content fzBig">{{info.initMoney}}</div>
            </div>
            <div class="fromLine" style="margin-top: 15px;">
              <div class="label">创建日期：</div>
              <div class="fromLine-content fw">{{info.netWorthTime | parseTime}}</div>
            </div>
          </div>
        </div>
      </div>
    </pubChunk>

    <div class="nav flex-h-sb">
      <div class="nav-left flex">
        <div class="nav-item" :class="{'navActive': navActive==1}" @click="curNavHandle(1)">组合分类分析</div>
        <div class="nav-item" :class="{'navActive': navActive==2}" @click="curNavHandle(2)">组合策略分析</div>
      </div>
      <div class="nav-right flex-v-center">
        <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
          <el-form-item label="对比指标：" prop="types" style="margin-bottom: 0px">
            <indexSelectTree v-model="dataFrom.types" size="small" :clearable="false" @contrastOptionsObj="contrastOptionsObj" :width="300"></indexSelectTree>
          </el-form-item>
          <el-form-item style="margin: 0 0 0 20px">
            <el-button size="small" type="primary" @click="saveParamsHandle">应用</el-button>
            <el-button size="small" @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="content">

      <pubChunk :mt="20">
        <span slot="title">历史走势图</span>
        <div slot="headLeft">
          <div class="flex wrap">
            <chart1Head ref="chart1Head" :more_chart1_nav_list2="more_chart1_nav_list2" :chartDate.sync="chart_date" :oldDate="oldDate" @sameSection="sameSectionHandle"></chart1Head>
            <el-button-group style="margin-left: 14px;">
              <el-button size="small" :type="dateFreq==1?'primary':''" :disabled="defaultDateFreq>1" @click="dateFreq=1">日频</el-button>
              <el-button size="small" :type="dateFreq==2?'primary':''" :disabled="defaultDateFreq>2" @click="dateFreq=2">周频</el-button>
              <el-button size="small" :type="dateFreq==3?'primary':''" @click="dateFreq=3">月频</el-button>
            </el-button-group>
            <el-checkbox style="margin-left: 14px;" class="flex-v-center" v-model="showBeyondIncome">显示超额曲线</el-checkbox>
          </div>
        </div>
        <Chart1 v-if="id&&dataFrom.types.length&&info.compositionName" @viewObj="viewObjHandle" id="detailsComn1" :userId="userId" :ids="id" :id_index="dataFrom.types" 
        :chart_date="chart_date" :sameSection="sameSection" :defaultDateFreq.sync="defaultDateFreq" :dateFreq.sync="dateFreq" :showBeyondIncome="showBeyondIncome"
        :name1="info.compositionName" :name2="info.compositionName" :indexNames="one_contrastOptions_list" :typePage="navActive==1?'combManage':'combManage-strategy'" :height="280" width="100%" />
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title">收益风险指标</span>
        <div v-show="showChunk2&&navActive==1" :key="list_riskIndicators_key1" class="showChunk">
          <el-table
            v-loading="listLoading_riskIndicators"
            :data="list_riskIndicators"
            fit default-expand-all
            row-key="rowKey"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            size="mini"
            style="width: 100%;"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          >
            <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span v-if="row.classifyId" style="cursor: pointer;color: #1890ff;" @click.stop="groupDeltailHandle(row.classifyId)">{{ row.name }}</span>
                <span v-else style="cursor: pointer;color: #666;">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="nominalAmount" label="名义金额(万元)" align="center">
              <template slot-scope="{row}">
                <span v-if="row.nominalAmount">{{ row.nominalAmount }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="initMoney" label="投资金额" align="center">
              <template slot-scope="{row}">
                <span v-if="row.initMoney">{{ row.initMoney }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="权重" align="center">
              <template slot-scope="{row}">
                <span v-if="row.weight">{{ row.weight | toFixed2 }}%</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="incomeRate" label="收益率" min-width="100" align="center">
              <template slot-scope="{row}">
                <span v-if="row.incomeRate" :class="row.incomeRate>=0?'positiveFc':'negativeFc'">
                  {{ row.incomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="annualizedIncomeRate" label="年化收益率" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.annualizedIncomeRate" :class="scope.row.annualizedIncomeRate>=0?'positiveFc':'negativeFc'">
                  {{scope.row.annualizedIncomeRate}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="annualFluctuationsRate" label="年化波动率" align="center"></el-table-column>
            <el-table-column prop="sharpeRate" label="夏普比率" align="center"></el-table-column>
            <el-table-column prop="maximumDrawdownRate" label="最大回撤" align="center"></el-table-column>
            <el-table-column prop="calmarRate" label="卡玛比率" align="center"></el-table-column>
            <el-table-column prop="maxBackIncomDay" label="最大回撤回补期" min-width="100" align="center">
              <template slot-scope="{row}">
                <span v-if="row.maxBackIncomDay">{{ row.maxBackIncomDay }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="maxNotByNewHightDay" label="最大不创新高天数" min-width="100" align="center">
              <template slot-scope="{row}">
                <span v-if="row.maxNotByNewHightDay">{{ row.maxNotByNewHightDay }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="investWinningRate" label="投资胜率" align="center"></el-table-column>
          </el-table>
        </div>
        <div v-show="showChunk2&&navActive==2" :key="list_riskIndicators_key2" class="showChunk">
          <!-- class="expand-table__hover-bg riskIndicators-table" -->
          <el-table
            v-loading="listLoading_riskIndicators"
            :data="list_riskIndicators"
            fit default-expand-all
            row-key="rowKey"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            size="mini"
            style="width: 100%;"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          >
            <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span v-if="row.strategyId" style="cursor: pointer;color: #1890ff;" @click.stop="strategyDeltailHandle(row.strategyId)">{{ row.name }}</span>
                <span v-else-if="row.classifyId" style="cursor: pointer;color: #1890ff;" @click.stop="groupDeltailHandle(row.classifyId)">{{ row.name }}</span>
                <span v-else style="color: #666;">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="nominalAmount" label="名义金额(万元)" align="center">
              <template slot-scope="{row}">
                <span v-if="row.nominalAmount">{{ row.nominalAmount }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="initMoney" label="投资金额" align="center">
              <template slot-scope="{row}">
                <span v-if="row.initMoney">{{ row.initMoney }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="权重" align="center">
              <template slot-scope="{row}">
                <span v-if="row.weight">{{ row.weight | toFixed2 }}%</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="incomeRate" label="收益率" min-width="100" align="center">
              <template slot-scope="{row}">
                <span v-if="row.incomeRate" :class="row.incomeRate>=0?'positiveFc':'negativeFc'">
                  {{ row.incomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="annualizedIncomeRate" label="年化收益率" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.annualizedIncomeRate" :class="scope.row.annualizedIncomeRate>=0?'positiveFc':'negativeFc'">
                  {{scope.row.annualizedIncomeRate}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="annualFluctuationsRate" label="年化波动率" align="center"></el-table-column>
            <el-table-column prop="sharpeRate" label="夏普比率" align="center"></el-table-column>
            <el-table-column prop="maximumDrawdownRate" label="最大回撤" align="center"></el-table-column>
            <el-table-column prop="calmarRate" label="卡玛比率" align="center"></el-table-column>
            <el-table-column prop="maxBackIncomDay" label="最大回撤回补期" min-width="100" align="center">
              <template slot-scope="{row}">
                <span v-if="row.maxBackIncomDay">{{ row.maxBackIncomDay }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="maxNotByNewHightDay" label="最大不创新高天数" min-width="100" align="center">
              <template slot-scope="{row}">
                <span v-if="row.maxNotByNewHightDay">{{ row.maxNotByNewHightDay }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="investWinningRate" label="投资胜率" align="center"></el-table-column>
          </el-table>
        </div>
      </pubChunk>

      <pubChunk :mt="20">
        <div slot="title" class="line">
          <span class="showMonth_navList-item" :class="{'showMonth_navList-item_active': showMonth_navList_active==i}" 
          v-for="(item, i) in showMonth_navList" :key="i" @click="showMonthNavHandle(i)">
            {{item}}
          </span>
        </div>
        <div slot="headLeft" class="cutTableChart_icon">
          <div class="line">
            <div class="showMonth">
              <div class="round round1"></div>
              {{ info.compositionName }}
            </div>
            <div class="showMonth">
              <div class="round round2"></div>
              <el-select style="width: 130px;" v-model="month_contrast" size="mini" clearable placeholder="请选择" @change="monthContrastHandle">
                <el-option
                  v-for="item in one_contrastOptions_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div v-show="navActive==2&&showMonth_navList_active==3" style="margin: 0 10px 0 40px;line-height: 30px;" class="flex">
              <div style="margin: 0 10px 0 40px;line-height: 30px;">下属策略</div>
              <el-select v-model="combTreeStrategyId" size="mini" clearable placeholder="请选择" @change="combTreeStrategyIdHandle">
                <el-option-group
                  v-for="group in combTree"
                  :key="group.classifyId"
                  :label="group.classfyName">
                  <el-option
                    v-for="item in group.classifyStrategyExt"
                    :key="item.strategyId"
                    :label="item.strategyName"
                    :value="item.strategyId">
                  </el-option>
                </el-option-group>
              </el-select>
            </div>
          </div>
          <div style="margin-left: 26px;">
            <svg-icon icon-class="zhuzhuangtu" :class="{'showMonth_cutIcon_active': showMonth_cutIcon_active==1}" @mouseenter="showMonthCutIcon(1)" />
            <svg-icon icon-class="caidan" :class="{'showMonth_cutIcon_active': showMonth_cutIcon_active==2}" @mouseenter="showMonthCutIcon(2)" />
          </div>
        </div>
        <div v-show="showChunk4" class="showChunk">
          <el-table
            v-show="showMonth_navList_active==3&&showMonth_cutIcon_active==2"
            v-loading="listLoading_netWorth"
            :data="list_showMonth"
            stripe fit
            size="mini" max-height="516"
            :cell-class-name="showMonthTableClassName"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;"
          >
            <el-table-column prop="0.year" label="年份" width="100" align="center">
              <template slot-scope="{row}">
                <div class="cell-pl-10">
                  <showMonthOpen v-if="row[12].compositionId" ref="showMonthOpen" :type="1" :combManageStrategy="navActive" :id="info.compositionId"
                  :monthlyIndexData="monthlyIndexData" :year="row[0].year" :indexName="name_contrast" :row="row" :rowName="info.compositionName" :onlyShowStrategyId="combTreeStrategyId">
                  </showMonthOpen>
                  <div v-else style="cursor: default;">{{row[0].year}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :prop="`${i-1+''}`" :label="`${i}月`" align="center" v-for="i in 12" :key="i">
              <template slot-scope="scope">
                <span v-if="scope.row[i-1].growthRate!=null" :class="scope.row[i-1].growthRate>=0?'positiveFc':'negativeFc'">
                  {{scope.row[i-1].growthRate}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="12.growthRate" label="YTD" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row[12].growthRate!=null" :class="scope.row[12].growthRate>=0?'positiveFc':'negativeFc'">
                  {{scope.row[12].growthRate}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="showMonth_navList_active==2&&showMonth_cutIcon_active==2" v-loading="listLoading_showMonth_table1" style="min-height: 200px;">
            <el-table
              v-if="showMonth_table1.length"
              :data="showMonth_table1"
              stripe fit
              size="mini" max-height="516"
              :cell-style="{padding: '8px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;"
            >
              <el-table-column prop="quarterName" label="季度/名称" width="100" align="center"></el-table-column>
              <el-table-column prop="" :label="item.definition" align="center" min-width="160" v-for="(item, i) in showMonth_table1[0].list" :key="i">
                <template slot-scope="scope">
                  <span v-if="scope.row.list[i].sumPnl!=null" :class="scope.row.list[i].sumPnl>=0?'positiveFc':'negativeFc'">
                    {{scope.row.list[i].sumPnl | toFixed2}}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="showMonth_navList_active==1&&showMonth_cutIcon_active==2" v-loading="listLoading_showMonth_table2" style="min-height: 200px;">
            <el-table
              v-if="showMonth_table2.length"
              :data="showMonth_table2"
              stripe fit
              size="mini" max-height="516"
              :cell-style="{padding: '8px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;"
            >
              <el-table-column prop="quarterName" label="年份/名称" width="100" align="center"></el-table-column>
              <el-table-column prop="" :label="item.definition" align="center" min-width="160" v-for="(item, i) in showMonth_table2[0].list" :key="i">
                <template slot-scope="scope">
                  <span v-if="scope.row.list[i].sumPnl!=null" :class="scope.row.list[i].sumPnl>=0?'positiveFc':'negativeFc'">
                    {{scope.row.list[i].sumPnl | toFixed2}}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="showMonth_navList_active==0&&showMonth_cutIcon_active==2" v-loading="listLoading_showMonth_table3" style="min-height: 200px;">
            <el-table
              v-if="showMonth_table3.length"
              :data="showMonth_table3"
              stripe fit
              size="mini" max-height="516"
              :cell-style="{padding: '8px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;"
            >
              <el-table-column prop="quarterName" label="年份/名称" width="100" align="center"></el-table-column>
              <el-table-column prop="" :label="item.definition" align="center" min-width="160" v-for="(item, i) in showMonth_table3[0].list" :key="i">
                <template slot-scope="scope">
                  <span v-if="scope.row.list[i].sumPnl!=null" :class="scope.row.list[i].sumPnl>=0?'positiveFc':'negativeFc'">
                    {{scope.row.list[i].sumPnl | toFixed2}}%
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="month-chartContent">
            <div v-if="showMonth_cutIcon_active==1" class="mChunk1">
              <month-return-chart v-if="combTreeStrategyName" v-loading="list_monthNetWorthDistributed_loading" id="monthReturnChart" :name_contrast="name_contrast" :chart_date="chart_date" :navActive="navActive"
              :month_contrast="month_contrast" :y-name="computedName" :data="list_monthNetWorthDistributed" :showMonth_navList_active="showMonth_navList_active" :height="400" width="100%" />
            </div>
          </div>
        </div>
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title">产品相关性</span>
        <div slot="headLeft" class="relevance-tip">
          <!-- <div class="yellow-block"></div> 黄色代表净值条数 ≤ 30条 -->
          <div class="red-block"></div> 红色代表高相关性 ≥ 0.8
          <div class="green-block"></div> 绿色代表低相关性 ≤ 0.3
        </div>
        <div v-show="showChunk6" class="showChunk">
          <el-table
            v-loading="listLoading_productRelevance"
            :data="relevance_list"
            fit
            size="mini"
            style="width: 100%;"
            :cell-style="{padding: '8px 0'}"
            :cell-class-name="relevanceTableRowClassName"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          >
            <el-table-column type="index" width="200" label="产品名称" :index="relevanceTitleHandle"></el-table-column>
            <el-table-column :prop="`list[${i}].productRelevance`" :label="item.strategyName" v-for="(item, i) in relevance_list" :key="i" align="center"></el-table-column>
          </el-table>
        </div>
      </pubChunk>

      <pubChunk :mt="20">
        <span slot="title">历史净值</span>
        <div v-show="showChunk3" class="showChunk">
          <el-table
            v-loading="listLoading_netWorth"
            :data="list_netWorth"
            stripe fit
            size="mini"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <!-- <el-table-column prop="compositionName" label="组合名称" align="center" min-width="180" show-overflow-tooltip></el-table-column> -->
            <el-table-column prop="networthTime" label="净值日期" align="center" min-width="100">
              <template slot-scope="{row}">
                <span>{{ row.networthTime | parseTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="networthValue" label="单位净值" align="center" min-width="100"></el-table-column>
            <el-table-column prop="networthValue" label="累计净值" align="center" min-width="100"></el-table-column>
            <el-table-column prop="networthValue" label="复权累计净值" align="center" min-width="100"></el-table-column>
            <el-table-column prop="pnl" label="涨跌幅" align="center" min-width="100">
              <template slot-scope="{row}">
                <span v-if="row.pnl!=null" :class="row.pnl>=0?'positiveFc':'negativeFc'">
                  {{ row.pnl }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-if="total_netWorth>0" style="padding-bottom: 0;" :total="total_netWorth" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="HistoryNetworthListHandle" />
        </div>
      </pubChunk>
      
    </div>
  
  <div style="height:200px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getIndexRiskByIndexTypeAndTime, getMonthlyIndex, findTimeScopeGrowth, getQuarterNetWorthDistributed, getYearNetWorthDistributed, getSegmentNetWorthDistributed, getMonthNetWorth, getMonthNetWorthDistributed } from '@/api/policyManage'
import { findCompositionClassifyStrategyByCompositionId, getCompositionNetWorthIncomByQuarter, getCompositionNetWorthIncomByYear, 
getCompositionAndStrategyNetWorthByQuarter, getCompositionAndStrategyNetWorthByYear, getCompositionAndClassifySegment, getCompositionAndStrategySegment, getQuarterCompositionNetWorthDistribute,
getYearCompositionNetWorthDistribute, getSegmentCompositionNetWorthDistribute, getCompositionStrategyRelevance } from '@/api/combManage'
import indexSelectTree from '@/components/investComn/indexSelectTree.vue'
import monthReturnChart from '@/components/Charts/barEcharts_monthReturn.vue'
import Chart1 from '@/components/Charts/strategyComb/groupManage/chart1.vue'
import showMonthOpen from '@/views/other/showMonthOpen.vue'
import Pagination from '@/components/Pagination'
import chart1Head from '@/components/investComn/chart1Head.vue'
import { parseTime, deepClone } from '@/utils'
import { riskIndexCalc, randomNum } from '@/utils/pro'
import pubChunk from '@/components/investComn/pubChunk.vue'
import debounce from 'lodash/debounce'

export default {
  name: 'AfterManageCombinationDetails',
  components: { indexSelectTree, Chart1, Pagination, monthReturnChart, showMonthOpen, chart1Head, pubChunk },
  props: {
    idName: {
      type: String,
      required: true 
    },
    getHeadDetail: {
      type: Function,
      required: true 
    },
    findNetworthById: {
      type: Function,
      required: true 
    },
    getMaxDown: {
      type: Function,
      required: true 
    },
    getRiskRateById: {
      type: Function,
      required: true 
    },
    HistoryNetworthList: {
      type: Function,
      required: true 
    },
    findNetWorthMonthly: {
      type: Function,
      required: true 
    },
    findNetWorthExtendBySegment: {
      type: Function,
      required: true 
    },
    findNetWorthMonthlyHistogram: {
      type: Function,
      required: true 
    },
    findNetWorthMonthDetailByPage: {
      type: Function,
      required: true 
    },
    findWorthMonthDistribute: {
      type: Function,
      required: true 
    },
    sublist: {
      type: Function,
      required: true 
    },
  },
  data() {
    return {
      navActive: 1,

      showBeyondIncome: false, // 超额收益

      defaultDateFreq: undefined,
      dateFreq: undefined,

      params: {},
      showMonthView: false,
      monthlyIndexData: {},

      active: 1,
      listLoading1: false,
      list1: [],

      chart_date: [],
      oldDate: [],
      more_chart1_nav_list2: [],
      dataFrom: {
        types: []
      },
      id: '',
      info: {},
      start_date: '',
      sameSection: false,

      showChunk1: true,

      showChunk2: true,
      listLoading_riskIndicators1: true,
      listLoading_riskIndicators2: true,
      listLoading_riskIndicators3: true,
      listLoading_riskIndicators4: false,
      list_riskIndicators: [], // 收益风险指标
      nominalAmount: '',
      list_riskIndicators_key1: 1,
      list_riskIndicators_key2: 100,
      tip_list_riskIndicators: 1,
      _list_riskIndicators: [], // 保存基础 收益风险指标
      riskIndicators_columnLabel: {
        'annualizedIncomeRate': '年化收益',
        'annualFluctuationsRate': '年化波动',
        'sharpeRate': '夏普比率',
        'maximumDrawdownRate': '最大回撤回补期',
        'calmarRate': '卡玛比率',
        'maxBackIncomDay': '最大回补天数',
        'investWinningRate': '投资胜率',
      },
      add_column_list: [],

      showChunk3: true,
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,

      showChunk4: true,
      showMonth_navList: ['区间收益','年度收益','季度收益','月度收益'],
      combTreeStrategyId: '',
      combTreeStrategyName: '',
      showMonth_navList_active: 0,
      showMonth_cutIcon_active: 2,
      one_contrastOptions_list: [],
      // 季度收益
      listLoading_showMonth_table1: false,
      listLoading_showMonth_table2: false,
      listLoading_showMonth_table3: false,
      list_monthNetWorthDistributed_loading: false,
      showMonth_table1: [],
      showMonth_table2: [],
      showMonth_table3: [],
      contrastOptions_obj: {},
      listLoading_monthNetWorth: false,
      month_contrast: undefined,
      old_month_contrast1: undefined, // 记录所选指数
      old_month_contrast2: undefined, // 记录所选指数
      old_month_contrast3: undefined, // 记录所选指数
      name_contrast: '',
      combTree: [],
      combTreeStrategyList: [],
      value: '',
      list_showMonth: [],
      _list_showMonth: [],
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: { // 月度回报 分页
        pageCurrent: 1,
        limit: 10
      },
      monthNetWorthDetial_total: 0,

      showChunk5: true,
      listLoading: false,
      classfyList: [], 
      netWorthDetialBeanList: [], // 子策略数据

      strategyList: [],

      showChunk6: true,
      listLoading_productRelevance: false,
      relevance_list: [],

      chart1List: []

    }
  },
  computed: {
    ...mapGetters(['userId']),
    computedName() {
      if(this.combTreeStrategyId&&this.navActive==2&&this.showMonth_navList_active==3) {
        return this.combTreeStrategyName
      }else {
        return this.info.compositionName
      }
    },
    listLoading_riskIndicators() {
      if(!this.listLoading_riskIndicators1&&!this.listLoading_riskIndicators2&&!this.listLoading_riskIndicators3&&!this.listLoading_riskIndicators4&&this.chart1List.length) {
        return false
      }
      return true
    },
  },
  watch: {
    'dataFrom.types': {
      handler(newVal, oldVal) {
        if(newVal.length > 5) {
          this.$message({
            message: '最多选择5个对比指标',
            type: 'warning',
            duration: 2000
          })
          this.$nextTick(() => {
            this.dataFrom.types = oldVal
          })
        }
        if(Object.keys(this.contrastOptions_obj).length) {
          this.one_contrastOptions_list = []
          newVal.forEach(item => {
            this.one_contrastOptions_list.push({
              id: item,
              name: this.contrastOptions_obj[item]
            })
          })
          if(oldVal) this.getIndexRiskByIndexTypeAndTime(newVal)
        }
      },
      deep: true
    },
    month_contrast(val) {
      if(val) {
        this.name_contrast = this.contrastOptions_obj[val] // 月度表现头部修改
      }
      this.showMonthNavHandle(this.showMonth_navList_active)
    },
    listLoading_riskIndicators(val) {
      if(!val) {
        this.$nextTick(() => {
          this.list_riskIndicators = this.riskRecursionHandle(this.chart1List, this.list_riskIndicators)
          this.list_riskIndicators[0].nominalAmount = this.nominalAmount
          if(this.navActive==1) {
            this.list_riskIndicators_key1++
          }
          if(this.navActive==2) {
            this.list_riskIndicators_key2++
          }
        })
      }
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id  // 多开标签
    this.params[this.idName] = this.id
    this.HistoryNetworthListHandle()
    this.findNetWorthMonthlyHandle()
    this.findCompositionClassifyStrategyByCompositionId()
    this.findNetWorthExtendBySegmentHandle()
    this.findNetWorthMonthlyHistogramHandle()
    this.findWorthMonthDistributeHandle()
    this.findNetWorthMonthDetailByPageHandle()
    this.getProductRelevance(2)
  },
  methods: {
    goContrast() {
      const res_list = [{
        id: this.id,
        name: this.info.compositionName,
        type: 3
      }]
      const id = randomNum(6)
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list),
          one: 1
        }
      })
    },
    viewObjHandle(data) {
      this.chart1List = riskIndexCalc(data)
      if(this.list_riskIndicators.length) {
        this.list_riskIndicators = this.riskRecursionHandle(this.chart1List, this.list_riskIndicators)
        this.list_riskIndicators[0].nominalAmount = this.nominalAmount
        if(this.navActive==1) {
          this.list_riskIndicators_key1++
        }
        if(this.navActive==2) {
          this.list_riskIndicators_key2++
        }
      }
    },
    riskRecursionHandle(resList, list) {
      list.map((items, i) => {
        const resList_i = resList.findIndex(item => item.name==items.name)
        if(resList_i!=-1) {
          const res = resList[resList_i]
          list[i] = {
            strategyId: items.strategyId,
            classifyId: items.classifyId,
            children: items.children,
            rowKey: items.rowKey,
            weight: items.weight,
            initMoney: items.initMoney,
            nominalAmount: items.nominalAmount,
            ...res
          }
        }else if(items.children) { // 分类
          items.children.forEach(_ => {
            list[i] = {
              classifyId: items.classifyId,
              annualFluctuationsRate: '--',
              sharpeRate: '--',
              maxBackIncomDay: '--',
              maximumDrawdownRate: '--',
              calmarRate: '--',
              investWinningRate: '--',
              ...list[i]
            }
          })
        }
        if(items.children) this.riskRecursionHandle(resList, items.children)
      })
      return list
    },
    relevanceTableRowClassName({ row, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'title-row'
      }else if(columnIndex-1 === rowIndex) {
        return 'title-row-gray'
      }else if(columnIndex>0 && row.list[columnIndex-1].productRelevance<=0.3) {
        return 'cell-row-low'
      }else if(columnIndex>0 && row.list[columnIndex-1].productRelevance>=0.8) {
        return 'cell-row-high'
      } 
      return ''
    },
    relevanceTitleHandle(i) {
      return this.relevance_list[i].strategyName
    },
    getProductRelevance(type) {
      this.listLoading_productRelevance = true
      getCompositionStrategyRelevance({ 
        relevanceStatus: type,
        ...this.params
      }).then(res => {
        this.listLoading_productRelevance = false
        this.relevance_list = res.body
      })
    },
    goConfigPage() {
      this.$router.push({
        path: '/strategyComb/combManage/config',
        query: {
          compositionId: this.id
        }
      })
    },
    showMonthCutIcon(i) {
      this.showMonth_cutIcon_active = i
    },
    // 组合-分类-策略树形结构
    findCompositionClassifyStrategyByCompositionId() {
      findCompositionClassifyStrategyByCompositionId({
        ...this.params
      }).then(res => {
        this.nominalAmount = res.body.strategyCompositionVo.nominalAmount
        this.combTree = res.body.strategyClassifyVos
        let list = []
        this.combTree.forEach(item => {
          list = list.concat(item.classifyStrategyExt)
        })
        this.combTreeStrategyList = list
        console.log('组合-分类-策略树形结构', this.combTree)
      })
    },
    // 切换月度表现nav
    showMonthNavHandle(i) {
      this.showMonth_navList_active = i
      switch (i) {
        case 0:
          if((!this.showMonth_table3.length) || this.old_month_contrast3!=this.month_contrast) {
            this.old_month_contrast3 = this.month_contrast
            if(this.navActive == 1) {
              this.getCompositionAndClassifySegment()
            }else {
              this.getCompositionAndStrategySegment()
            }
          }
          if(this.combTreeStrategyId) {
            this.getSegmentNetWorthDistributed()
          }else {
            this.getSegmentCompositionNetWorthDistribute()
          }
          break
        case 1:
          if((!this.showMonth_table2.length) || this.old_month_contrast2!=this.month_contrast) {
            this.old_month_contrast2 = this.month_contrast
            if(this.navActive == 1) {
              this.getCompositionNetWorthIncomByYear()
            }else {
              this.getCompositionAndStrategyNetWorthByYear()
            }
          }
          if(this.combTreeStrategyId) {
            this.getYearNetWorthDistributed()
          }else {
            this.getYearCompositionNetWorthDistribute()
          }
          break
        case 2:
          if((!this.showMonth_table1.length) || this.old_month_contrast1!=this.month_contrast) {
            this.old_month_contrast1 = this.month_contrast
            if(this.navActive == 1) {
              this.getCompositionNetWorthIncomByQuarter()
            }else {
              this.getCompositionAndStrategyNetWorthByQuarter()
            }
          }
          if(this.combTreeStrategyId) {
            this.getQuarterNetWorthDistributed()
          }else {
            this.getQuarterCompositionNetWorthDistribute()
          }
          break
        case 3:
          if(this.combTreeStrategyId&&this.navActive==2) {
            this.getMonthNetWorthDistributed(this.combTreeStrategyId)
          }else {
            this.findWorthMonthDistributeHandle()
          }
          break
        default: break
      }
    },
    getCompositionNetWorthIncomByQuarter() {
      this.listLoading_showMonth_table1 = true
      getCompositionNetWorthIncomByQuarter({
        ...this.params,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null
      }).then(res => {
        this.listLoading_showMonth_table1 = false
        console.log('季度收益-组合', res)
        this.showMonth_table1 = res.body
      })
    },
    getCompositionNetWorthIncomByYear() {
      this.listLoading_showMonth_table2 = true
      getCompositionNetWorthIncomByYear({
        ...this.params,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null
      }).then(res => {
        this.listLoading_showMonth_table2 = false
        console.log('年度收益-组合', res)
        this.showMonth_table2 = res.body
      })
    },
    getCompositionAndClassifySegment() {
      this.listLoading_showMonth_table3 = true
      getCompositionAndClassifySegment({
        ...this.params,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1]
      }).then(res => {
        this.listLoading_showMonth_table3 = false
        console.log('区间收益-组合', res)
        this.showMonth_table3 = res.body
      })
    },
    getCompositionAndStrategyNetWorthByQuarter() {
      this.listLoading_showMonth_table1 = true
      getCompositionAndStrategyNetWorthByQuarter({
        ...this.params,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null
      }).then(res => {
        this.listLoading_showMonth_table1 = false
        console.log('季度收益-策略', res)
        this.showMonth_table1 = res.body
      })
    },
    getCompositionAndStrategyNetWorthByYear() {
      this.listLoading_showMonth_table2 = true
      getCompositionAndStrategyNetWorthByYear({
        ...this.params,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null
      }).then(res => {
        this.listLoading_showMonth_table2 = false
        console.log('年度收益-策略', res)
        this.showMonth_table2 = res.body
      })
    },
    getCompositionAndStrategySegment() {
      this.listLoading_showMonth_table3 = true
      getCompositionAndStrategySegment({
        ...this.params,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1]
      }).then(res => {
        this.listLoading_showMonth_table3 = false
        console.log('区间收益-策略', res)
        this.showMonth_table3 = res.body
      })
    },
    sameSectionHandle(val) {
      this.sameSection = val
    },
    curNavHandle(i) {
      this.navActive = i
      this.showMonth_table1 = []
      this.showMonth_table2 = []
      this.showMonth_table3 = []
      this.dateFreq = undefined
      this.defaultDateFreq = undefined
      this.showMonthNavHandle(this.showMonth_navList_active)
      this.$refs.chart1Head.cnsHandle(0)
      if(this.navActive == 1) {
        this.sublistHandle()
        this.getProductRelevance(2) // 相关性
        this.listLoading_riskIndicators4 = false
      }else {
        this.strategySublistHandle1()
        this.getProductRelevance(1) // 相关性
        this.listLoading_riskIndicators2 = false
      }
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj
      this.getHeadDetailHandle()
    },
    saveParamsHandle() {
      // this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
    },
    refresh() {
      location.reload()
    },
    getHeadDetailHandle() {
      this.listLoading1 = true
      this.getHeadDetail({
        ...this.params
      }).then(res => {
        this.listLoading1 = false
        console.log('详情', res)

        // 多开标签 设置
        this.tempRoute = Object.assign({}, this.$route)
        this.$setTagsViewTitle(this.tempRoute, `净值分析[策略组合]-${res.body.compositionName}`)
        document.title = `净值分析[策略组合]-${res.body.compositionName}`

        this.info = res.body
        this.combTreeStrategyName = this.info.compositionName
        this.dataFrom.types = [res.body.indexType]
        // this.month_contrast = this.dataFrom.types[0]
        const dates = []
        dates[0] = parseTime(res.body.classifyNetWorthBean.startDate)
        dates[1] = res.body.classifyNetWorthBean.endDate ? parseTime(res.body.classifyNetWorthBean.endDate) : parseTime(new Date())
        this.chart_date = dates
        this.oldDate = deepClone(dates)
        let year0 = Number(this.chart_date[0].slice(0, 4))
        const year1 = Number(this.chart_date[1].slice(0, 4))
        this.more_chart1_nav_list2 = []
        while (year0<=year1) {
          this.more_chart1_nav_list2.push(year0+'年度')
          year0++
        }
        this.getRiskRateByIdHandle()

        this.getCompositionAndClassifySegment() // 区间收益
        this.getSegmentCompositionNetWorthDistribute()
        this.getCompositionNetWorthIncomByYear()
        this.getCompositionNetWorthIncomByQuarter()
      })
    },
    groupDeltailHandle(id) {
      this.$router.push({
        path: `/strategyComb/groupManage/netWorthAnalysis/${id}`
      })
    },
    strategyDeltailHandle(id) {
      this.$router.push({
        path: `/policyManage/netWorthAnalysis/${id}`,
        query: {
          // id,
          userId: this.userId
        }
      })
    },
    sublistHandle() {
      this.listLoading_riskIndicators2 = true
      this.sublist({
        ...this.params
      }).then(res => {
        console.log('分类列表', res)
        this.listLoading_riskIndicators2 = false
        this.listLoading = false
        if(res.body.length>1) {
          res.body.map((item, i) => {
            item.rowKey = i+2
            item.name = item.classfyName
            item.weight = item.compositionWeight
            item = Object.assign(item, item.riskIndicatorsBean)
          })
          this.classfyList = res.body
          this.$set(this.list_riskIndicators[0], 'children', res.body)
        }else {
          this.$set(this.list_riskIndicators[0], 'children', undefined)
        }
      })
    },
    strategySublistHandle1() {
      this.listLoading_riskIndicators4 = true
      const children = JSON.parse(JSON.stringify(this.combTree))
      children.forEach(item => {
        item.children = item.classifyStrategyExt
        item.rowKey = 'F'+item.classifyId
        item.name = item.classfyName
        item.hasNetWorth = true
        item.children.forEach(el => {
          el.rowKey = 'C'+el.strategyId
          el.name = el.strategyName
          el.initMoney = el.initialMoney
          el.hasNetWorth = true
        })
      })
      this.listLoading_riskIndicators4 = false
      this.$set(this.list_riskIndicators[0], 'children', children)
      console.log('分类列表1', this.list_riskIndicators)
    },
    showMonthTableClassName({ row, columnIndex }) {
      if(columnIndex === 0) {
        if(row[12].compositionId||row[12].strategyId) {
          return 'showMonthyearBorder0'
        }else {
          return 'showMonthyearBorder1'
        }
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'title-row'
      } else if (columnIndex === 1) {
        return 'cell-row-0'
      } else if (columnIndex === 2) {
        return 'cell-row-1'
      } else if (columnIndex === 3) {
        return 'cell-row-2'
      } else if (columnIndex === 4) {
        return 'cell-row-3'
      } else if (columnIndex === 5) {
        return 'cell-row-4'
      } else if (columnIndex === 6) {
        return 'cell-row-5'
      } else if (columnIndex === 7) {
        return 'cell-row-6'
      }
      return ''
    },
    titleHandle(i) {
      const key_list = Object.keys(this.riskIndicators_columnLabel)
      return this.riskIndicators_columnLabel[key_list[i]]
    },
    // 收益风险指标
    getRiskRateByIdHandle() {
      this.listLoading_riskIndicators1 = true
      this.getRiskRateById({
        ...this.params,
        showStrategyRisk: true,
        userId: this.userId
      }).then(res => {
        console.log('风险指标', res)
        this.listLoading_riskIndicators1 = false
        let _list_riskIndicators = []
        _list_riskIndicators = res.body
        _list_riskIndicators[0].name = this.info.compositionName
        _list_riskIndicators[0].strategyId = null  // 后端给组合传回了strategyId
        _list_riskIndicators[0].rowKey = 1
        _list_riskIndicators[0].classifyNetWorthExtendBeans = res.body[0].compositionNetWorthExtendBeans
        this.list_riskIndicators = _list_riskIndicators

        if(this.navActive == 1) {
          this.sublistHandle()
        }else {
          this.strategySublistHandle1()
        }
        this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
      })
    },
    // 收益风险指标 指数
    getIndexRiskByIndexTypeAndTime: debounce(function(indexType) {
      this.listLoading_riskIndicators3 = true
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('风险指标 指数', res)
        this.listLoading_riskIndicators3 = false
        this.list_riskIndicators = [this.list_riskIndicators[0]]
        Object.keys(res.body).forEach(index => {
          const name = this.contrastOptions_obj[index]
          this.list_riskIndicators.push({
            name,
            rowKey: index+10000,
            classifyNetWorthExtendBeans: res.body[index].scopeIndexVos,
            ...res.body[index],
          })
        })
      })
    }, 1000, { 'leading': true, 'trailing': false }),
    // 历史净值
    HistoryNetworthListHandle() {
      this.listLoading_netWorth = true
      this.HistoryNetworthList({
        ...this.params,
        ...this.listQuery,
        userId: this.userId
      }).then(res => {
        this.listLoading_netWorth = false
        console.log('历史净值', res)
        this.list_netWorth = res.body.list
        this.total_netWorth = res.body.total
      })
    },
    showMonthRowHandle(row) {
      if(row['12'].indexType) {
        return
      }
      this.showMonthView = true
      this.$nextTick(() => {
        this.$refs.showMonthOpen.init(row['12'].year, this.name_contrast)
      })
    },
    closeMonthRowHandle() {
      this.$refs.showMonthOpen.closeHandle()
    },
    // 历史月度表现
    findNetWorthMonthlyHandle() {
      this.listLoading_monthNetWorth = true
      this.findNetWorthMonthly({
        ...this.params,
        userId: this.userId
      }).then(res => {
        this.listLoading_monthNetWorth = false
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        console.log('历史月度表现', res)
        list.forEach((items, index) => { 
          items.map((el, j) => {
            el.growthRate = Number(el.monthIncrease)
            new_list[index][j].growthRate = Number(el.monthIncrease)
          })
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = new_list
        this._list_showMonth = deepClone(new_list)
        console.log('历史月度表现 修改........', this.list_showMonth)
      })
    },
    getMonthNetWorth(strategyId) { // 策略 月度收益
      this.listLoading_monthNetWorth = true
      getMonthNetWorth({
        strategyId, 
        compositionId: this.info.compositionId
      }).then(res => {
        this.listLoading_monthNetWorth = false
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        console.log('历史月度表现 策略', list)
        list.forEach((items, index) => {
          items.map((el, j) => {
            el.growthRate = Number(el.monthIncrease)
            new_list[index][j].growthRate = Number(el.monthIncrease)
          })
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = new_list
        this._list_showMonth = deepClone(new_list)
        console.log('历史月度表现 修改........', this.list_showMonth)
      })
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      if(indexType) {
        if(this.month_contrast) this.findTimeScopeGrowth(this.month_contrast)
        getMonthlyIndex({
          indexType,
          startTime: this.chart_date[0],
          endTime: this.chart_date[1]
        }).then(res => {
          console.log('指数月度表现', res)
          this.monthlyIndexData = res.body
          Object.keys(res.body).forEach(key => {
            const items = res.body[key]
            items.forEach(item => {
              if(item.indexTime) {
                item.month = Number(item.indexTime.slice(5))
              }else {
                item.month = 13
              }
              item.growthRate = item.indexGrowthRate==null ? null : Number(item.indexGrowthRate)
            })
          })
          const list = Object.keys(res.body).map(function(i) { return res.body[i] })
          const new_list = deepClone(list)
          list.forEach((items, index) => {
            if(items.length<13) {
              new_list[index] = []
              const year = items[0].year
              for(let i=0; i<13; i++) {
                if(items[i]&&items[i].month != i+1) {
                  if(!new_list[index][i]) {
                    new_list[index][i] = {
                      year: items[i].year
                    }
                  }
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else if(!new_list[index][i]) {
                  if(items[i]&&items[i].month == i+1) {
                    new_list[index][items[i].month-1] = deepClone(items[i])
                  }else {
                    new_list[index][i] = {
                      year
                    }
                  }
                }
              }
            }
          })
          this.list_showMonth = deepClone(this._list_showMonth)
          const save_list_showMonth = deepClone(this._list_showMonth)

          if(new_list.length>this.list_showMonth) {
            new_list.forEach(element => {
              this.list_showMonth.forEach((item, i) => {
                if(element[0].year == item[0].year) {
                  save_list_showMonth.splice(i+1, 0, element)
                }
              })
            })
          }else {
            let num = 0 // 插入之后_list_showMonth数组变长，需计数
            this.list_showMonth.forEach((element, n) => {
              new_list.forEach((item, i) => {
                if(element[0].year == item[0].year) {
                  save_list_showMonth.splice(n+1+num, 0, item)
                  num++
                }
              })
            })
          }
          this.list_showMonth = deepClone(save_list_showMonth)
        })
      }else {
        this.name_contrast = ''
        this.month_contrast = undefined
        this.list_showMonth = [] // 月度表现列表数据
        this.list_showMonth_profit = [] // 收益分布列表数据
        this.findNetWorthMonthlyHandle()
        this.findNetWorthExtendBySegmentHandle()
      }
    },
    // 收益分布 列表
    findNetWorthExtendBySegmentHandle() {
      this.findNetWorthExtendByStrategyId2_loading = true
      this.findNetWorthExtendBySegment({
        ...this.params,
        userId: this.userId
      }).then(res => {
        console.log('收益分布 列表', res)
        this.findNetWorthExtendByStrategyId2_loading = false
        this.headTail(res.body)
        this.list_showMonth_profit = res.body
      })
    },
    // 收益分布 列表 指数
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('对比指数 收益分布 列表', res)
        this.headTail(res.body)
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth
        })
        this.list_showMonth_key++
      })
    },
    headTail(list) {
      list.unshift(list[list.length-1])
      list.splice(list.length-1, 1)
    },
    // 收益分布 柱状图
    findNetWorthMonthlyHistogramHandle() {
      this.findNetWorthMonthlyHistogram({
        ...this.params,
        userId: this.userId
      }).then(res => {
        console.log('收益分布', res)
        this.list_monthNetWorthLine = res.body
      })
    },
    // 月度回报
    findWorthMonthDistributeHandle() {
      this.findWorthMonthDistribute({
        ...this.params,
        userId: this.userId
      }).then(res => {
        console.log('月度回报', res)
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-季度-柱状图
    getQuarterCompositionNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true
      getQuarterCompositionNetWorthDistribute({
        ...this.params,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-季度-柱状图1', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-年度-柱状图
    getYearCompositionNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true
      getYearCompositionNetWorthDistribute({
        ...this.params,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-年度-柱状图1', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-区间-柱状图
    getSegmentCompositionNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true
      getSegmentCompositionNetWorthDistribute({
        ...this.params,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-区间-柱状图1', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    }, 
    combTreeStrategyIdHandle(strategyId) {
      if(strategyId) {
        this.combTreeStrategyName = this.combTreeStrategyList.find(item => item.strategyId==strategyId).strategyName
        if(this.showMonth_navList_active==0) this.getSegmentNetWorthDistributed()
        if(this.showMonth_navList_active==1) this.getYearNetWorthDistributed()
        if(this.showMonth_navList_active==2) this.getQuarterNetWorthDistributed()
        if(this.showMonth_navList_active==3) this.getMonthNetWorthDistributed(strategyId)
        this.getMonthNetWorth(this.combTreeStrategyId)
        if(this.month_contrast) this.monthContrastHandle(this.month_contrast)
      }else {
        this.combTreeStrategyName = this.info.compositionName
        if(this.showMonth_navList_active==0) this.getSegmentCompositionNetWorthDistribute()
        if(this.showMonth_navList_active==1) this.getYearCompositionNetWorthDistribute()
        if(this.showMonth_navList_active==2) this.getQuarterCompositionNetWorthDistribute()
        if(this.showMonth_navList_active==3) this.findWorthMonthDistributeHandle()
        this.findNetWorthMonthlyHandle()
        if(this.month_contrast) this.monthContrastHandle(this.month_contrast)
      }
    },
    // 策略月度回报
    getMonthNetWorthDistributed(strategyId) {
      getMonthNetWorthDistributed({
        strategyId
      }).then(res => {
        console.log('月度回报', res)
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-季度-柱状图--策略
    getQuarterNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true
      getQuarterNetWorthDistributed({
        strategyId: this.combTreeStrategyId,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-季度-柱状图2', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-年度-柱状图--策略
    getYearNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true
      getYearNetWorthDistributed({
        strategyId: this.combTreeStrategyId,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-年度-柱状图2', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-区间-柱状图--策略
    getSegmentNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true
      getSegmentNetWorthDistributed({
        strategyId: this.combTreeStrategyId,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-区间-柱状图2', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 月度回报 列表
    findNetWorthMonthDetailByPageHandle() {
      this.getMonthNetWorthDetial_loading = true
      this.findNetWorthMonthDetailByPage({
        ...this.params,
        userId: this.userId,
        ...this.monthNetWorthDetial_listQuery
      }).then(res => {
        console.log('月度回报 列表', res)
        this.getMonthNetWorthDetial_loading = false
        this.list_table_getMonthNetWorthDetial = res.body.list
        this.monthNetWorthDetial_total = res.body.total
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.afterInvestDel-page {
  position: relative;
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
  .nav {
    height: 56px;
    margin-top: 20px;
    padding: 0 24px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .nav-left {
      font-size: 18px;
      font-weight: 400;
      color: #262626;
      .nav-item { font-family: PingFangSC-Regular, PingFang SC; cursor: pointer; line-height: 56px; & + .nav-item { margin-left: 48px; } }
    }
    .navActive {
      color: #1890FF;
      border-bottom: 2px solid #1890FF;
    }
  }
  .content {
    .column {
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      // margin-top: 30px;
      cursor: pointer;
      user-select: none;
      .el-icon { color: #4F95DD; font-weight: bold; margin-left: 6px; }
      .openChunk { transform: rotate(90deg); }
      &::before {
        display: inline-block;
        content: '';
        width: 6px;
        height: 26px;
        background: #42b983;
        margin-right: 6px;
      }
    }
  }
  
  .operation {
    display: flex;
    align-items: center;
  }

  .relevance-tip {
    line-height: 12px;
    display: flex;
    align-items: center;
    color: #666;
    font-size: 12px;
    margin-top: 10px;
    .yellow-block { width: 12px; height: 12px; background: #fcaa4d; }
    .red-block { width: 12px; height: 12px; background: #fc7486; margin-left: 6px; }
    .green-block { width: 12px; height: 12px; background: #7bdb91; margin-left: 6px; }
  }
  
}

.app-container1 {
  padding: 20px;
  min-height: 100vh;
  background: #F0F2F5;
}
.icon-jia {
  font-size: 12px;
  margin-right: 6px;
}
</style>

